<!DOCTYPE html>
<html lang="zh_en">
<head>
	<meta charset="UTF-8">
	<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
	<!-- <meta http-equiv="X-UA-Compatible" content="ie=edge"> -->
	<title>视频截取第一帧</title>
	<style>
		#imgs {
			width: 100%;
			/* height: 400px; */
			/* padding: 20px; */
			/* background: #c2c2c2 */
		}
		.content {
			/* width: 100%; */
			padding: 20px;
			text-align: center;
			background: #f2f2f2;
		}
		button {
			padding: 10px 30px;
			margin-top: 20px;
			background: lightskyblue;
			border: none;
			border-radius: 5px;
		}
		img {
			width: 100px;
			height: auto;
			max-width: 100%;
			max-height: 100%; 
			padding: 5px;
		}
	</style>
</head>

<body>
	<div class="content">
		<video controls width="700" height="300" src="../../img//tvc-v3_4138031.mp4" id="video"></video>
		<div>
			<button id="fileBtn">点击上传视频</button>
		</div>
		<input type="file" id="input" hidden />
	</div>

	<div class="content">
		<!-- <input type="number"><br> -->
		<button id="clickBtn">截截截截截截截截截截截图（播放）</button>
	</div>

	<div class="content">
		<h4>第一帧截图</h4>
		<img src="" alt="" id="img">
	</div>


	<div id="imgs"></div>
</body>

<script>
	var img = document.getElementById('img')
	var input = document.getElementById('input')
	var fileBtn = document.getElementById('fileBtn')
	var video = document.getElementById('video')
	var div = document.getElementById('imgs')
	var clickBtn = document.getElementById('clickBtn')
	var file;

	var canvas = document.createElement('canvas');
	var ctx = canvas.getContext('2d');
	width = video.clientWidth;
	height = video.clientHeight;
	console.log(video)

	var duration = 0

	let frames = []


	input.addEventListener('change', function (e) {
		file = this.files[0];

		var src = window.URL.createObjectURL(file);
		console.log(src);

		video.src = src;
		// video.currentTime = 1;
		// video.play();
	})

	fileBtn.addEventListener('click', function(e) {
		input.click();
	})

	// video.addEventListener('loadeddata', function (e) {
		
	// 	setTimeout(()=>{

	// 			// console.log('loadeddata')
	// 	canvas.width = this.videoWidth
	// 	canvas.height = this.videoHeight
	// 	width = this.videoWidth
	// 	height = this.videoHeight
	// 	// console.log(width, height)
	// 	// console.log(this)
	// 	ctx.drawImage(this, 1000, 1000, 1000, 1010);
	// 	var src = canvas.toDataURL('image/jpeg');
	// 	img.src = src;
	// 	// console.log(img);

	// 	// var currentTime = this.currentTime
	// 	// duration = this.duration
	// 	var fps = duration / 30
	// 	},500)
		
	// })

	video.addEventListener('canplay', function (e) {
		
		// console.log(e)
		// setTimeout(()=>{

				// console.log('loadeddata')
		canvas.width = this.videoWidth
		canvas.height = this.videoHeight
		width = this.videoWidth
		height = this.videoHeight
		// console.log(width, height)
		// console.log(this)
		ctx.drawImage(this, 0, 0, width, height);
		var src = canvas.toDataURL('image/gif');
		img.src = src;


		// canvas.toBlob(function(blob) {
		//     img.src = URL.createObjectURL(blob);	   
		//    }, 'image/gif', 0.95);
		// console.log(img);

		// var currentTime = this.currentTime
		// duration = this.duration
		var fps = duration / 300
		// },1000)

	
		   

		
	})

	video.addEventListener('loadeddata', consoleString.bind(video, 'loadeddata')) // 当前帧加载完毕
	video.addEventListener('loadedmetadata', consoleString.bind(video, 'loadedmetadata')) // 视频元数据加载完毕
	video.addEventListener('canplay', consoleString.bind(video, 'canplay')) // 视频缓冲能够开始播放
	video.addEventListener('timeupdate', consoleString.bind(video, 'timeupdate')) // 播放位置发生改变时
	video.addEventListener('play', consoleString.bind(video, 'play')) // 开始播放时
	video.addEventListener('waiting', consoleString.bind(video, 'waiting')) // 要播放下一帧而需要缓冲时

	function consoleString(string) {
		console.log(string)
		console.log(this.duration)
		console.log(this.currentTime)
	}

	clickBtn.addEventListener('click', click2shot)

	function click2shot() {
		// console.log(video.src);
		var isSrc = video.src.indexOf('blob:') < 0 ? false : true;
		if (!isSrc) return alert(`没东西啊啊啊啊啊啊啊啊啊`);
		video.pause();
		//坐原图像的x,y轴坐标，大小，目标图像的x，y轴标，大小。
		ctx.drawImage(video, 0, 0, video.height, video.width);
		//把图标base64编码后变成一段url字符串
		var dataUrl = canvas.toDataURL("image/png"); 

		//创建一个和video相同位置的图片
		var $imgBig = document.createElement('img');
		$imgBig.src = dataUrl

		div.appendChild($imgBig);
	
		if (!video.duration && video.currentTime < video.duration) return video.currentTime = 0
		video.play();
	}

	// video.addEventListener('timeupdate',click2shot)

</script>


</html>
